<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			select,#btn{
				float: left;
				width: 50px;
				height: 120px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<select id="sel1" multiple="multiple">
			<option value ="1">添加</option>
			<option value ="2">修改</option>
			<option value ="3">删除</option>
			<option value ="4">保存</option>
			<option value ="5">打印</option>
		</select>
		<div id="btn">
			<input type="button" id="one" value=">>" /><br>
			<input type="button" id="two" value=">" /><br>
			<input type="button" id="three" value="<" /><br>
			<input type="button" id="four" value="<<" /><br>
		</div>
		<select id="sel2" multiple="multiple"></select>
		<script type="text/javascript">
			var selone=document.getElementById("sel1");
			var seltwo=document.getElementById("sel2");
			
			//移动选中项
			function moveselectedOptions(selone,seltwo){
				var opts=selone.getElementsByTagName("option");
				var j=opts.length;
				// for(var i=0;i<j;i++){
				// 	seltwo.appendChild(opts[0]);
				// }
				for(var i=j-1;i>=0;i--){
					if(opts[i].selected==true){
						seltwo.appendChild(opts[i]);
					}
				}
			}
			
			//移动所有对象
			function moveAllOptions(selone,seltwo){
				var opts=selone.getElementsByTagName("option");
				var j=opts.length;
				// for(var i=0;i<j;i++){
				// 	seltwo.appendChild(opts[0]);
				// }
				for(var i=j-1;i>=0;i--){
					seltwo.appendChild(opts[i]);
				}
			}
			
			document.getElementById("one").onclick=function(){
				moveAllOptions(selone,seltwo);
			};
			document.getElementById("two").onclick=function(){
				moveselectedOptions(selone,seltwo);
			};
			document.getElementById("three").onclick=function(){
				moveselectedOptions(seltwo,selone);
			};
			document.getElementById("four").onclick=function(){
				moveAllOptions(seltwo,selone);
			}
		</script>
	</body>
</html>
